<!--  -->
<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="放/取样计划">
        <template slot="btn">

        </template>
      </modules-title>
    </div>

    <div style="padding:20px" class="management">
      <el-form :inline="true">
        <el-form-item label="" >
          <el-select v-model="all" placeholder="全部状态" clearable size="small"
            @change="changeStatus()">
            <el-option v-for="(item, index) in status" :key="index" :label="item.label"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="" style="margin-left:40px">
          <el-select v-model="inspect_type" placeholder="稳定性考察类型" clearable size="small">
            <el-option v-for="(item, index) in v1" :key="index" :label="item.inspect_type_name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="" style="margin-left:40px">
          <el-select v-model="place_condition" placeholder="放置条件" clearable size="small"
           >
            <el-option v-for="(item, index) in v2" :key="index" :label="item.place_conditions_name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="" style="margin-left:40px">
          <el-select v-model="project" placeholder="项目名称" clearable size="small"
           >
            <el-option v-for="(item, index) in projects" :key="index" :label="item.project_name"
              :value="item.project_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字搜索" style="margin-left:40px">
          <el-input v-model="name" placeholder="请输入关键字" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item style="margin-left:40px">
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索
          </el-button>
          <el-button icon="el-icon-refresh" plain size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="tableData" size="medium" border @row-click="rowClick" :cell-style="cellStyle">
        <el-table-column prop="plan_no" label="计划编号" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.plan_no}}
          </template>
        </el-table-column>
        <el-table-column prop="sample_name" label="样品名称" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.sample_info.sample_name}}
          </template>
        </el-table-column>
        <el-table-column prop="sample_batch" label="批号" align="center">
          <template slot-scope="scope">
             <div style="display: flex;flex-wrap: wrap;" v-if="scope.row.plan.batch_info!=null">
                <div v-for="(item,index) in scope.row.plan.batch_info" :key=index>
                  <span>{{item.sample_batch}}</span>
                  <span v-if="scope.row.plan.batch_info.length-1!=index">,</span>
                </div>
              </div>
          </template>
        </el-table-column>
        <el-table-column prop="sample_attrs" label="规格" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.sample_info.sample_attrs}}
          </template>
        </el-table-column>
        <el-table-column prop="inspect_type" label="稳定性考察类型" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.inspect_type.inspect_type_name}}
          </template>
        </el-table-column>
        <el-table-column prop="place_conditions" label="放置条件" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.place_conditions.place_conditions_name}}
          </template>
        </el-table-column>
        <el-table-column prop="stability_scheme_name" label="稳定性方案" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.stability_scheme_name}}
          </template>
        </el-table-column>
        <el-table-column prop="project_name" label="项目名称" align="center">
          <template slot-scope="scope">
            {{scope.row.plan.project_name}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.plan.status==0">
              <span v-if="scope.row.s==0">进行中</span>
              <span v-if="scope.row.s==1" >进行中<br><span class="status-color10">[待放样]</span></span>
              <span v-if="scope.row.s==2" >进行中<br><span class="status-color10">[待取样]</span></span>
              <span v-if="scope.row.s==3" >进行中<br><span class="status-color10">[待复核]</span></span>
            </span>
            <span v-if="scope.row.plan.status==1" > 进行中<br><span class="status-color10">[稳定性箱变更中]</span></span>
            <span v-if="scope.row.plan.status==2" > 已结束</span>
            <span v-if="scope.row.plan.status==3" > 已结束<br><span class="status-color10">[方案变更]</span></span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="200" align="center">
          <template #default="{row}">
            <el-button type="text" icon="el-icon-view" @click="handlDeltails(row.plan.id)">查看详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination style="display:flex;justify-content:flex-end;padding-bottom:0px!important" :total="total"
          :page.sync="pages.pageNum" :limit.sync="pages.pageSize" @pagination="afreshList" />
    </div>
  </div>
</template>

<script>
import {
 selectInvestigationList,
 selectInvestigationfList,
 List,
 projectList
  } from "@/api/stability/management";
export default {
  data() {
    return {
      projects:[],
      all:'',
      status1:'-1',
      inspect_type:'',
      place_condition:'',
      name:'',
      project:'',
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      status:[
        {
          id:'0',
          label:'进行中'
        },
        {
          id:'1',
          label:'进行中（稳定性箱变更中）'
        },
        {
          id:'2',
          label:'已结束'
        },
        {
          id:'3',
          label:'已结束（方案变更）'
        }
      ],
      tableData: [

      ],
      values: [],
      open: false,
      openF: false,
      form: {
        num: ""
      },
      rules: {},
      checkList: [],
      v1:[],
      v2:[],
      if_source:0
    };
  },
  beforeRouteEnter(to, from, next) {
    to.params.refresh = from.params.refresh;
    next();
  },
  activated() {
    if (this.$route.params.refresh) {
      this.getList();
    }
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},
  //属性是手动定义的所需监听的值
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getSelectfType()
    this.getSelectType()
    this.getProject()
    if(this.$route.query.research==1){
      this.status1='0'
      this.all='0'
      this.if_source=1
    }else{
      this.if_source=0
    }
    this.getList()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    getProject(){
     projectList().then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.projects = res.data;
        }
      });
    },
    cellStyle(data) {
      return "cursor:pointer;"
    },
    rowClick(row){
      console.log(row.plan.id)
      this.$router.push({
        path: '/stability/management/details',
        query: {
          id: row.plan.id
        }
      })
    },
    changeStatus(){
      this.status1 = this.all
      if(this.all==''){
        this.status1 = '-1'
      }
    },
    handleQuery(){
      this.pages={
        pageNum: 1,
        pageSize: 10,
      }
      console.log(1111)
      this.getList()
    },
    afreshList(){
      this.getList()
    },
    //获取放置条件下拉
    getSelectfType() {
      selectInvestigationfList().then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.v2 = res.data;
        }
      });
    },
    //获取考察类型
    getSelectType() {
      selectInvestigationList().then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.v1 = res.data;
        }
      });
    },
    getList(){
      let data = {
        pager:{
          limit:this.pages.pageSize,
          skip:this.pages.pageNum
        },
        if_source:this.if_source,
        status:Number(this.status1),
        inspect_type_id:this.inspect_type,
        name:this.name,
        place_conditions_id:this.place_condition,
        project_id:this.project
      }
      List(data).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.total = res.data.total
          this.tableData = res.data.data
          console.log(this.tableData)
          console.log(new Date().getTime())
          let time1= this.dateFormat1('yyyy-mm-dd',new Date())
          // console.log(time1)
          // let time1 = new Date().getTime()
          for(let i=0;i<this.tableData.length;i++){
            let b = false
            if(!b){
              for(let j=0;j<this.tableData[i].point_info.length;j++){
                  let time= this.dateFormat1('yyyy-mm-dd',new Date(this.tableData[i].point_info[j].operation_time))
                  // let time= new Date(this.tableData[i].point_info[j].operation_time).getTime()
                  if(this.tableData[i].point_info[j].status==0&&this.tableData[i].point_info[j].operation_type==1){
                    Object.assign(this.tableData[i],{s:1})
                    b=true
                    break
                  }else if(this.tableData[i].point_info[j].status==0&&this.tableData[i].point_info[j].operation_type==2&&time1>=time){
                    Object.assign(this.tableData[i],{s:2})
                    b=true
                    break
                  }else if(this.tableData[i].point_info[j].status==1){
                    Object.assign(this.tableData[i],{s:3})
                    b=true
                    break
                  }
               }
             if (!b) {
              Object.assign(this.tableData[i],{s:0})
                b=true
            }

          }
          }
          // this.total = res.data.total
        }
      })
    },
    resetQuery() {
      this.pages={
        pageSize:10,
        pageNum:1,
      }
      this.status1="-1",
      this.inspect_type=''
      this.name=''
      this.place_condition='',
      this.inspect_type=''
      this.all = ''
      this.project=''
      this.if_source=0
      this.getList()
    },
    q() {
      this.open = true;
    },
    f() {
      this.openF = true;
    },
    handleClose() {
      this.open = false;
      this.openF = false;
    },
    submitForm() {
      this.open = false;
      this.openF = false;
    },
    //查看详情
    handlDeltails(id) {
      // this.$router.push("/stability/management/details");
      this.$router.push({
        path: '/stability/management/details',
        query: {
          id: id
        }
      })
    }
  }
};
</script>
<style lang="scss">
/* @import url(); 引入css类 */
::v-deep .el-button--text {
  padding: 0;
  margin: 0 !important;
  margin-right: 10px !important ;
}
.management{
  .el-table{
      max-height: calc( 100vh - 130px);
      // .el-table__header{
      //   .cell{
      //   }
      // }
      // .el-table__body{
      //   .el-table__row{
      //     height: 60px;
      //     .cell{
      //     }
      //   }
      // }
      .el-table__body-wrapper{
        overflow-y: auto;
        max-height: calc( 100vh - 320px);
      }
    }
}
</style>
